<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 骑手状态卡片 -->
    <view class="bg-gradient-to-r from-blue-400 to-blue-600 px-[32rpx] py-[60rpx]">
      <view class="flex items-center justify-between mb-[32rpx]">
        <view class="flex items-center">
          <image 
            :src="riderInfo.avatar || defaultProductImage" 
            class="w-[120rpx] h-[120rpx] rounded-full border-4 border-white mr-[32rpx]"
            mode="aspectFill"
          />
          <view>
            <text class="text-[36rpx] font-bold text-white block mb-[8rpx]">{{ riderInfo.name || '未认证骑手' }}</text>
            <text class="text-[28rpx] text-blue-100">{{ riderInfo.phone || '---' }}</text>
          </view>
        </view>
        <view class="text-right">
          <nut-switch 
            v-model="riderInfo.isOnline" 
            @change="toggleOnlineStatus"
            active-color="#10b981"
            inactive-color="#6b7280"
          />
          <text class="text-[24rpx] text-blue-100 block mt-[8rpx]">
            {{ riderInfo.isOnline ? '在线' : '离线' }}
          </text>
        </view>
      </view>
      
      <!-- 今日数据 -->
      <view class="grid grid-cols-3 gap-[32rpx]">
        <view class="text-center">
          <text class="text-[48rpx] font-bold text-white block">{{ todayStats.orders }}</text>
          <text class="text-[24rpx] text-blue-100">今日订单</text>
        </view>
        <view class="text-center">
          <text class="text-[48rpx] font-bold text-white block">¥{{ todayStats.earnings }}</text>
          <text class="text-[24rpx] text-blue-100">今日收入</text>
        </view>
        <view class="text-center">
          <text class="text-[48rpx] font-bold text-white block">{{ todayStats.distance }}km</text>
          <text class="text-[24rpx] text-blue-100">行驶里程</text>
        </view>
      </view>
    </view>

    <!-- 快捷操作 -->
    <view class="bg-white mx-[32rpx] -mt-[40rpx] rounded-[24rpx] p-[32rpx] shadow-lg mb-[32rpx]">
      <view class="grid grid-cols-4 gap-[32rpx]">
        <view 
          v-for="action in quickActions" 
          :key="action.key"
          class="flex flex-col items-center cursor-pointer"
          @tap="handleQuickAction(action)"
        >
          <view class="w-[80rpx] h-[80rpx] bg-blue-100 rounded-[20rpx] flex items-center justify-center mb-[16rpx]">
            <text class="text-[32rpx]">{{ action.icon }}</text>
          </view>
          <text class="text-[26rpx] text-gray-600">{{ action.title }}</text>
        </view>
      </view>
    </view>

    <!-- 订单状态 -->
    <view class="px-[32rpx] mb-[32rpx]">
      <text class="text-[32rpx] font-bold text-gray-800 block mb-[24rpx]">订单管理</text>
      <view class="grid grid-cols-2 gap-[24rpx]">
        <view 
          v-for="status in orderStatusList" 
          :key="status.key"
          class="bg-white rounded-[24rpx] p-[32rpx] cursor-pointer"
          @tap="goToOrderList(status.key)"
        >
          <view class="flex items-center justify-between mb-[16rpx]">
            <text class="text-[36rpx]">{{ status.icon }}</text>
            <view 
              v-if="status.count > 0"
              class="bg-red-500 text-white text-[24rpx] rounded-full w-[48rpx] h-[48rpx] flex items-center justify-center"
            >
              {{ status.count }}
            </view>
          </view>
          <text class="text-[30rpx] font-medium text-gray-800 block mb-[8rpx]">{{ status.title }}</text>
          <text class="text-[26rpx] text-gray-500">{{ status.description }}</text>
        </view>
      </view>
    </view>

    <!-- 当前配送订单 -->
    <view v-if="currentOrder" class="px-[32rpx] mb-[32rpx]">
      <text class="text-[32rpx] font-bold text-gray-800 block mb-[24rpx]">当前配送</text>
      <view class="bg-white rounded-[24rpx] p-[32rpx]">
        <view class="flex justify-between items-center mb-[24rpx]">
          <text class="text-[28rpx] text-gray-600">订单号：{{ currentOrder.orderNo }}</text>
          <text class="text-[28rpx] font-medium text-green-600">配送中</text>
        </view>
        
        <view class="flex items-center mb-[24rpx]">
          <text class="text-[28rpx] text-gray-600 mr-[16rpx]">📍</text>
          <text class="text-[28rpx] text-gray-800">{{ currentOrder.address }}</text>
        </view>
        
        <view class="flex items-center mb-[24rpx]">
          <text class="text-[28rpx] text-gray-600 mr-[16rpx]">📞</text>
          <text class="text-[28rpx] text-gray-800">{{ currentOrder.customerPhone }}</text>
        </view>
        
        <view class="flex justify-between items-center">
          <text class="text-[32rpx] font-bold text-red-500">¥{{ currentOrder.totalAmount }}</text>
          <view>
            <nut-button 
              type="default" 
              size="small"
              class="mr-[16rpx]"
              @click="callCustomer"
            >
              联系客户
            </nut-button>
            <nut-button 
              type="primary" 
              size="small"
              class="bg-green-500 border-green-500"
              @click="completeDelivery"
            >
              完成配送
            </nut-button>
          </view>
        </view>
      </view>
    </view>

    <!-- 历史统计 -->
    <view class="px-[32rpx] mb-[32rpx]">
      <text class="text-[32rpx] font-bold text-gray-800 block mb-[24rpx]">历史统计</text>
      <view class="bg-white rounded-[24rpx] p-[32rpx]">
        <view class="grid grid-cols-2 gap-[32rpx]">
          <view class="text-center">
            <text class="text-[36rpx] font-bold text-gray-800 block">{{ historyStats.totalOrders }}</text>
            <text class="text-[26rpx] text-gray-500">总订单数</text>
          </view>
          <view class="text-center">
            <text class="text-[36rpx] font-bold text-gray-800 block">{{ historyStats.rating }}</text>
            <text class="text-[26rpx] text-gray-500">服务评分</text>
          </view>
          <view class="text-center">
            <text class="text-[36rpx] font-bold text-gray-800 block">¥{{ historyStats.totalEarnings }}</text>
            <text class="text-[26rpx] text-gray-500">总收入</text>
          </view>
          <view class="text-center">
            <text class="text-[36rpx] font-bold text-gray-800 block">{{ historyStats.workDays }}</text>
            <text class="text-[26rpx] text-gray-500">工作天数</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 底部安全区域 -->
    <view class="h-[120rpx]"></view>
  </view>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import Taro from '@tarojs/taro'

/**
 * 骑手中心页面 - 骑手工作台和订单管理
 * 性能优化：实时数据更新，位置信息缓存，订单状态同步
 */

interface RiderInfo {
  id?: number
  name?: string
  phone?: string
  avatar?: string
  isOnline: boolean
  status: 'idle' | 'delivering' | 'offline'
}

interface TodayStats {
  orders: number
  earnings: number
  distance: number
}

interface HistoryStats {
  totalOrders: number
  rating: number
  totalEarnings: number
  workDays: number
}

interface QuickAction {
  key: string
  title: string
  icon: string
}

interface OrderStatus {
  key: string
  title: string
  description: string
  icon: string
  count: number
}

interface CurrentOrder {
  id: number
  orderNo: string
  address: string
  customerPhone: string
  totalAmount: number
  estimatedTime: string
}

// 使用Taro导航

// 响应式数据
const defaultProductImage = 'http://www.dzgktf.com/templets/default/images/wtyt.jpg'

// 骑手信息
const riderInfo = ref<RiderInfo>({
  id: 1,
  name: '李师傅',
  phone: '139****9999',
  avatar: defaultProductImage,
  isOnline: true,
  status: 'delivering'
})

// 今日统计
const todayStats = ref<TodayStats>({
  orders: 15,
  earnings: 320,
  distance: 45
})

// 历史统计
const historyStats = ref<HistoryStats>({
  totalOrders: 1250,
  rating: 4.8,
  totalEarnings: 25600,
  workDays: 120
})

// 快捷操作
const quickActions = ref<QuickAction[]>([
  { key: 'scan', title: '扫码取餐', icon: '📱' },
  { key: 'navigation', title: '导航配送', icon: '🗺️' },
  { key: 'earnings', title: '收入明细', icon: '💰' },
  { key: 'feedback', title: '意见反馈', icon: '💭' }
])

// 订单状态
const orderStatusList = ref<OrderStatus[]>([
  { 
    key: 'pending', 
    title: '待接单', 
    description: '有新订单等待接单',
    icon: '📋', 
    count: 3 
  },
  { 
    key: 'delivering', 
    title: '配送中', 
    description: '正在配送的订单',
    icon: '🚚', 
    count: 1 
  }
])

// 当前配送订单
const currentOrder = ref<CurrentOrder | null>({
  id: 1,
  orderNo: 'MT202312230001',
  address: '北京市朝阳区三里屯SOHO A座1202',
  customerPhone: '138****8888',
  totalAmount: 58,
  estimatedTime: '15:00'
})

// 方法
const toggleOnlineStatus = () => {
  console.log('切换在线状态:', riderInfo.value.isOnline)
  riderInfo.value.status = riderInfo.value.isOnline ? 'idle' : 'offline'
}

const handleQuickAction = (action: QuickAction) => {
  console.log('快捷操作:', action.title)
  
  switch (action.key) {
    case 'scan':
      // 打开扫码功能
      console.log('打开扫码')
      break
    case 'navigation':
      // 打开导航
      console.log('打开导航')
      break
    case 'earnings':
      Taro.navigateTo({
        url: '/pages/rider/earnings/index'
      })
      break
    case 'feedback':
      Taro.navigateTo({
        url: '/pages/feedback/index'
      })
      break
  }
}

const goToOrderList = (status: string) => {
  Taro.navigateTo({
    url: `/pages/rider/order-list/index?status=${status}`
  })
}

const callCustomer = () => {
  console.log('联系客户:', currentOrder.value?.customerPhone)
  // 实际项目中会调用拨号功能
}

const completeDelivery = () => {
  console.log('完成配送:', currentOrder.value?.orderNo)
  // 完成配送逻辑
  currentOrder.value = null
  todayStats.value.orders += 1
  todayStats.value.earnings += 58
}

// 生命周期
onMounted(() => {
  console.log('骑手中心页面加载完成')
  // 开始实时位置更新
  startLocationUpdate()
})

const startLocationUpdate = () => {
  console.log('开始位置更新')
  // 实际项目中会开启位置监听
}
</script>

<style lang="scss" scoped>
.bg-gradient-to-r {
  background: linear-gradient(90deg, #60a5fa 0%, #2563eb 100%);
}

.cursor-pointer {
  cursor: pointer;
}
</style> 